<%@ page language="java" pageEncoding="UTF-8" contentType="text/html;charset=UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    request.setAttribute("basePath",basePath);
%>
<%@ include file="/resources/js/easyui/taglibs.jsp"%>
<%@ include file="/resources/js/wechat/_wechatui.jsp"%>
<%@ include file="/resources/js/easyui/_viewJS.jsp"%>
<!DOCTYPE>
<html>
<head>
    <title>二维码</title>
    <script src="${basePath}resources/js/wechat/js/jquery.qrcode.js"></script>
    <script src="${basePath}resources/js/wechat/js/utf.js"></script>
</head>
<body>
<div class="loading"></div>
<!-- header -->
<header>
    <a href="javascript:history.go(-1);" class="top_fh">二维码</a>
</header>
<!-- header end -->

<div class="page home_page">
    <div class="home_code_inner">
        <div class="code_top code_popbox">
            <div id="qrcode" style="margin-left: -8%;"></div>
            <p><span>多局二维码</span></p>
        </div>
        <c:choose>
            <c:when test="${!empty list}">
                <c:forEach items="${list}" var="discount" varStatus="status">
                    <div>
                        <ul>
                            <li class="code_popbox">
                                <div id="qrcodeWechat${status.index}" style="margin-left: -15%;"></div>
                                <p><span>${discount.discountname}</span></p>
                            </li>
                            <li class="code_popbox">
                                <div id="qrcodeAlipay${status.index}" style="margin-left: -15%;"></div>
                                <p><span>${discount.discountname}</span></p>
                            </li>
                        </ul>
                    </div>
                </c:forEach>
            </c:when>
            <c:otherwise>
                <div>
                    <h3>暂无其他套餐</h3>
                </div>
            </c:otherwise>
        </c:choose>

    </div>
</div>

<!-- 二维码弹窗 -->
<div class="home_codepop ty_pop">
    <div class="popbg"></div>
    <div class="code_inner">
        <div style="height: 15rem">
            <img id="image" src="">
        </div>
        <p><span></span></p>
    </div>
</div>
<!-- 二维码弹窗 end -->
</body>

<script type="application/javascript">
    <c:choose>
        <c:when test="${!empty list}">
            getQRCode('qrcode','${list.get(0).payUrl}','');
            <c:forEach items="${list}" var="discount" varStatus="status">
                getQRCode('qrcodeWechat${status.index}','${discount.wechatPayUrl}','${basePath}resources/images/wechat/wechat.png');
                getQRCode('qrcodeAlipay${status.index}','${discount.aliPayUrl}','${basePath}resources/images/wechat/alipay.png');
            </c:forEach>
        </c:when>
        <c:otherwise>
            getQRCode('qrcode','${device.payUrl}','');
        </c:otherwise>
    </c:choose>

    //生成二维码
    function getQRCode(id,text,src){
        return $("#"+id).qrcode({
            render : "canvas",    //设置渲染方式，有table和canvas，使用canvas方式渲染性能相对来说比较好
            text : text,    //扫描二维码后显示的内容,可以直接填一个网址，扫描二维码后自动跳向该链接
            width : "160",               //二维码的宽度
            height : "160",              //二维码的高度
            background : "#ffffff",       //二维码的后景色
            foreground : "#000000",        //二维码的前景色
            src:src             //二维码中间的图片
        });
    }

    //二维码放大
    $(".home_code_inner .code_popbox").on("click" , function(){
        var text = $(this).find('p span').text();
        var id = $(this).children("div").attr("id");
        var imgSrc = document.getElementById(id).getElementsByTagName("canvas")[0].toDataURL("image/png");
        $(".home_codepop").show().find(".code_inner").find("p span").text(text).end().find("#image").attr("src",imgSrc);
    });

</script>

</html>